<template>
  <div class="gl-border">
    <div class="content-item">
      房源位置： <el-select v-model="queryParams.schoolAreaId"
                 placeholder="--校区--"
                 @change="cascade('campus')"
                 size="small">
        <el-option v-for="(item, index) in campus"
                   :key="index"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="queryParams.campusId"
                 placeholder="--园区--"
                 @change="cascade('gardens')"
                 size="small">
        <el-option v-for="(item, index) in gardens"
                   :key="index"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="queryParams.buildingId"
                 placeholder="--楼栋--"
                 size="small">
        <el-option v-for="(item, index) in buildings"
                   :key="index"
                   :label="item.number + '-' + item.unitNumber"
                   :value="item.id">
        </el-option>
      </el-select>
      <el-button type="primary"
                 size="small"
                 @click="query()">搜索</el-button>
    </div>
    <div class="content-item">
      <el-row>
        <el-col :span="8">
          <div class="tran">
            <div class="tran-header">
              <span>未选</span>
              <span>{{leftSelectedList.length}}/{{realData1.length}}</span>
            </div>
            <div class="tran-body">
              <el-input v-model="queryString1"
                        style="width: 200px;margin: 10px;"
                        placeholder="请输入房间号"
                        size="small"></el-input>
              <el-button type="primary"
                         size="small"
                         @click="libQuery(1)">搜索</el-button>
              <TabList :tabData="tabData1"
                       isSelection="selection"
                       :selectionChange="leftSelectionChange"
                       :columns="columns"></TabList>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="tran-arrow">
            <div class="arrow">
              <el-button type="primary"
                         :disabled="!leftSelectedList.length"
                         style="display: block"
                         icon="el-icon-arrow-right"
                         @click="toRight"
                         circle></el-button>
              <el-button type="primary"
                         :disabled="!rightSelectedList.length"
                         style="display: block;margin-left: 0 !important;margin-top: 10px;"
                         icon="el-icon-arrow-left"
                         @click="toLeft"
                         circle></el-button>
            </div>

          </div>
        </el-col>
        <el-col :span="8">
          <div class="tran">
            <div class="tran-header">
              <span>已选</span>
              <span>{{rightSelectedList.length}}/{{realData2.length}}</span>
            </div>
            <div class="tran-body">
              <el-input v-model="queryString2"
                        style="width: 200px;margin: 10px;"
                        placeholder="请输入房间号"
                        size="small"></el-input>
              <el-button type="primary"
                         size="small"
                         @click="libQuery(2)">搜索</el-button>
              <TabList :tabData="tabData2"
                       isSelection="selection"
                       :selectionChange="rightSelectionChange"
                       :columns="columns"></TabList>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="setNum">
        <el-input-number v-model.number="bedNum"
                         controls-position="right"
                         type="number"
                         size="small"
                         style="width: 300px"
                         placeholder="请输入床位数"></el-input-number>
        <el-button type="primary"
                   :loading="loading"
                   size="small"
                   @click="sure">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  listSchoolAreaByUserUsingGET,
  listCampusBySchoolAreaIdAndUserUsingGET,
  listBuildingByCampusIdAndUserUsingGET,
  listRoomByBuildingIdAndNoStudentUsingGET,
  setRoomBedUsingPOST
} from '@api/auto'
export default {
  data () {
    return {
      loading: false,
      bedNum: null,
      queryParams: {
        schoolAreaId: null,
        campusId: null,
        buildingId: null
      },
      queryString1: '',
      queryString2: '',
      campus: [],
      gardens: [],
      buildings: [],
      cascade (type) {
        const actions = new Map([
          ['campus', 'changeCampus'],
          ['gardens', 'changeGardens']
        ])
        let temp = actions.get(type)
        this[temp]()
      },
      // 校区change
      changeCampus () {
        this.queryParams.campusId = ''
        this.queryParams.buildingId = ''
        this.listCampusBySchoolAreaIdAndUserUsingGET(this.queryParams.schoolAreaId)
      },
      // 园区change
      changeGardens () {
        this.queryParams.buildingId = ''
        this.listBuildingByCampusIdAndUserUsingGET(this.queryParams.campusId)
      },
      columns: [
        { label: '房间编号', prop: 'name' },
        { label: '楼层', prop: 'floorName' },
        { label: '床位数', prop: 'bedNum' }
      ],
      tabData1: [],
      tabData2: [],
      realData1: [],
      realData2: [],
      leftSelectedList: [],
      rightSelectedList: []
    }
  },
  created () {
    this.listSchoolAreaByUserUsingGET()
  },
  methods: {
    // 获取校区
    listSchoolAreaByUserUsingGET () {
      listSchoolAreaByUserUsingGET().then(res => {
        this.campus = res.data
        // this.queryParams.schoolAreaId = res.data.length ? res.data[0].id : null
      })
    },
    // 获取园区
    listCampusBySchoolAreaIdAndUserUsingGET (id) {
      listCampusBySchoolAreaIdAndUserUsingGET(id).then(res => {
        this.gardens = res.data
        // this.queryParams.campusId = res.data.length ? res.data[0].id : null
      })
    },
    // 获取楼栋
    listBuildingByCampusIdAndUserUsingGET (id) {
      listBuildingByCampusIdAndUserUsingGET(id).then(res => {
        this.buildings = res.data
        // this.queryParams.buildingId = res.data.length ? res.data[0].id : null
      })
    },
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      if (this.queryParams.buildingId) {
        listRoomByBuildingIdAndNoStudentUsingGET(this.queryParams.buildingId).then(res => {
          this.tabData1 = [...res.data]
          this.tabData2 = []
          this.realData1 = [...res.data]
          this.realData2 = []
        })
      } else {
        this.$message.error('请选择完整')
      }
    },
    libQuery (num) {
      if (this.queryParams.buildingId) {
        let tabData = []
        let key = `realData${num}`
        this[key].forEach(ele => {
          if (ele.name.includes(this[`queryString${num}`])) {
            tabData.push(ele)
          }
        })
        this[`tabData${num}`] = tabData
      }
    },
    leftSelectionChange (val, row) {
      this.leftSelectedList = val
      console.log(val)
    },
    rightSelectionChange (val) {
      this.rightSelectedList = val
      console.log(val)
    },
    toRight () {
      this.tabData2.push(...this.leftSelectedList)
      this.realData2.push(...this.leftSelectedList)
      this.leftSelectedList.forEach(item => {
        let index = this.tabData1.findIndex(ele => {
          return item.id === ele.id
        })
        let index2 = this.realData1.findIndex(ele => {
          return item.id === ele.id
        })
        this.tabData1.splice(index, 1)
        this.realData1.splice(index2, 1)
      })
      // this.realData2 = [...this.tabData2]
    },
    toLeft () {
      this.tabData1.push(...this.rightSelectedList)
      this.realData1.push(...this.rightSelectedList)
      this.rightSelectedList.forEach(item => {
        let index = this.tabData2.findIndex(ele => {
          return item.id === ele.id
        })
        let index2 = this.realData2.findIndex(ele => {
          return item.id === ele.id
        })
        this.tabData2.splice(index, 1)
        this.realData2.splice(index2, 1)
      })
      // this.realData1 = [...this.tabData1]
    },
    sure () {
      let body = { bedNum: this.bedNum, roomIdList: [] }
      this.tabData2.forEach(item => {
        body.roomIdList.push(item.id)
      })
      if (this.bedNum < 0 || this.bedNum > 99) {
        this.$message.error('床位数必须是不小于0的2位以内的数字')
      } else {
        this.loading = true
        setRoomBedUsingPOST(body).then(res => {
          this.query()
          this.$message.success('操作成功')
          this.bedNum = null
          this.loading = false
        }).catch(res => {
          this.loading = false
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.tran {
  width: 100%;
  min-height: 500px;
  min-width: 350px;
  border: 1px solid #cccccc;
  &-header {
    height: 40px;
    background: #f5f7fa;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
}
.tran-arrow {
  min-height: 500px;
  min-width: 150px;
  position: relative;
  .arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.setNum {
  height: 50px;
  border-top: 1px solid #cccccc;
  margin-top: 10px;
  line-height: 50px;
}
</style>
